<template>
	<view>
		<image v-if="img" :src="img" mode="widthFix" style="width: 750rpx;height: 1322rpx;" show-menu-by-longpress>
		</image>
		<l-painter v-else-if="!loadingShowStatus && !img"
			:css="`width: 750rpx;height: 1322rpx;background: linear-gradient( 180deg, #E8EEFF 10%, #0041FF 100%);`"
			isCanvasToTempFilePath @success="handleSuccess" custom-style="position: fixed; left: 200%">
			<l-painter-view
				:css="'position:absolute;display: inline-block;width: 700rpx;height: 1050rpx;border-radius: 14rpx;background-color: #FFF; top:25rpx;right:25rpx'">
				<!-- 背景开始 -->
				<l-painter-image :src="posterDatas.cover"
					css="position:absolute;top:0; width: 700rpx;height: 610rpx;object-fit: cover;" />
				<l-painter-view
					:css="`position:absolute;width: 700rpx;height: 610rpx;background: linear-gradient(180deg, rgba(255,255,255,0) 75%, rgba(255,255,255,1) 90%);`"></l-painter-view>
				<!-- 背景结束 -->
				<l-painter-view
					:css="`position:absolute;top:56rpx;left:36rpx;width:116rpx;padding:20rpx 0;border-top:2rpx solid #FFFFFF;border-bottom:2rpx solid #FFFFFF;`">
					<l-painter-text :css="`color:#FFFFFF;font-size:26rpx;display:block;line-height:26rpx;`" :text="`${posterDatas.year}/${posterDatas.month}`" />
					<l-painter-text :css="`color:#FFFFFF;font-size:94rpx;font-weight: 600;display:block;line-height:94rpx;padding-top:10rpx;`" :text="posterDatas.day" />
					<l-painter-text :css="`color:#FFFFFF;font-size:26rpx;display:block;line-height:26rpx;`" :text="posterDatas.month_en" />
				</l-painter-view>
				
				<l-painter-view
					:css="`position:absolute;top:58rpx;right:36rpx;width:120rpx;`">
					<l-painter-text :css="`color:#FFFFFF;font-size:40rpx;font-weight: 600;display:block;line-height:40rpx;padding-top:10rpx;`" :text="posterDatas.week" />
					<l-painter-text :css="`color:#FFFFFF;font-size:24rpx;display:block;line-height:24rpx;padding-top:15rpx;text-align:right;`" :text="posterDatas.week_en" />
				</l-painter-view>
				
				<l-painter-view
					:css="`position:absolute;top:283rpx;left:26rpx;width:700rpx;`">
					<l-painter-text :css="`color:#FFFFFF;font-size:46rpx;font-weight: 600;display:block;line-height:40rpx;padding-top:46rpx;`" text="“ 快速 专业 权威 真诚 ”" />
				</l-painter-view>
				<!-- <l-painter-image src="https://resource.lanbaozixun.com/uploads/images/202501211512404dc024020.png"
					css="position:absolute;top:450rpx;left:36rpx; width: 182rpx;height: 50rpx;object-fit: cover;" /> -->
				<l-painter-view :css="`position:absolute;z-index:10;top:540rpx;left:0;width:700rpx;`">
					<l-painter-text :css="`line-clamp:2;color:#0C0C0C;font-weight: 600;font-size:48rpx;display:block;line-height:58rpx;padding:36rpx 0 0 36rpx;width:650rpx;`" :text="posterDatas.title" />
					<l-painter-text :css="`line-clamp:4;color:#666666;font-size:28rpx;display:block;line-height:35rpx;padding:20rpx 0 0 36rpx;width:650rpx;`" :text="posterDatas.describe" />
				</l-painter-view>
				
				<l-painter-view :css="`position:absolute;top:926rpx;left:36rpx;width:484rpx;`">
					<l-painter-image :src="businessCardInformation.avatar"
						css="display: inline-flex;top:0; width: 96rpx;height: 96rpx;object-fit: cover;border-radius:50rpx;" />
					<l-painter-view :css="`position:absolute;left:96rpx;top:20rpx;padding-left:20rpx;display:flex;flex-direction:row;`">
						<l-painter-text :css="`line-clamp:1;color:#0C0C0C;font-weight: 600;font-size:32rpx;display:block;line-height:32rpx;max-width:178rpx;display:inline-block;`" :text="businessCardInformation.nickname" />
						<l-painter-text :css="`line-clamp:1;color:#666666;font-size:28rpx;display:block;line-height:35rpx;max-width:178rpx;padding-left:15rpx;`" :text="businessCardInformation.position" />
					</l-painter-view>
					<l-painter-view :css="`position:absolute;left:96rpx;top:70rpx;padding-left:20rpx;display:flex;flex-direction:row;`">
						<l-painter-text :css="`line-clamp:1;color:#999999;font-size:22rpx;display:block;line-height:22rpx;max-width:178rpx;display:inline-block;padding-right:15rpx;`" :text="`经验 ${businessCardInformation.experience|| 1}年`" />
						<l-painter-text :css="`line-clamp:1;color:#999999;font-size:22rpx;display:block;line-height:22rpx;max-width:178rpx;padding-left:15rpx;border-left:1rpx solid #999999;`" :text="`累积服务 ${businessCardInformation.numberServices}人`" />
					</l-painter-view>
					
				</l-painter-view>
				<l-painter-view :css="`position:absolute;left:530rpx;top:870rpx;padding-left:20rpx;`">
					 <l-painter-qrcode
						v-if="link"
					    :text="link"
					    css="width: 124rpx; height: 124rpx"
					  />
					<l-painter-text :css="`line-clamp:1;color:#999999;font-size:20rpx;display:block;line-height:20rpx;width:124rpx;padding-top:15rpx;`" text="扫码阅读全文" />
				</l-painter-view>
			</l-painter-view>
			<l-painter-view :css="`position:absolute;bottom:0; width: 750rpx;`">
				<l-painter-image src="https://resource.lanbaozixun.com/uploads/images/202501211557444e1df2519.png"
					css="display: inline-flex;top:0; width: 750rpx;height: 320rpx;object-fit: cover;" />
			</l-painter-view>
		</l-painter>
		<xy-loading v-if="loadingShowStatus"></xy-loading>
		<view class="bg-white u-padding-top-15 u-padding-bottom-15 u-text-center" style="position: absolute;bottom: 0;left: 0;right: 0;">
			长按保存图片
		</view>
	</view>
</template>

<script>
	const {
		Lunar
	} = require('lunar-javascript')
	import {
		getArticleInformation
	} from '@/api/publicArticle'
	export default {
		data() {
			return {
				userId:0,
				articleId:0,
				posterDatas:{
					cover:'',
					year:'',
					month:'',
					day:'',
					month_en:'',
					week:'',
					week_en:'',
					title:'',
					describe:'',
				},
				businessCardInformation:{
					avatar:'',
					nickname:'',
					position:'',
					experience:'',
					numberServices:'',
				},
				img: '',
				link:'',
				loadingShowStatus:true
			};
		},
		async onLoad(e) {
			if(this.$u.test.isEmpty(e.id) || this.$u.test.isEmpty(e.user_id)){
				uni.navigateBack({
					fail() {
						uni.reLaunch({
							url:'/yixu/pages/article_acquisition/index'
						})
					}
				})
			}
			this.articleId = e.id;
			this.userId = e.user_id;
			this.loadingShowStatus = true
			const {
				data
			} = await getArticleInformation({
				id: this.articleId || 0,
				user_id: this.userId || 0
			}, 1)
			var d = this.getDateInfo(new Date())
			
			this.posterDatas = {
				cover:data.cover,
				year:d.year,
				month:d.month,
				day:d.day,
				month_en:d.monthName,
				week:d.week,
				week_en:d.weekDay,
				title:data.title,
				describe:data.synopsis,
			}
			
			this.businessCardInformation = {
				avatar:data.user_business_card.avatar,
				nickname:data.user_business_card.name,
				position:data.user_business_card.position,
				experience:data.user_business_card.years_working,
				numberServices:data.user_business_card.services_sum_count,
			}
			this.link = this.getDomainWithProtocol() + `/mobile/yixu/pages/article_acquisition/poster?id=${this.articleId}&user_id=${this.userId}`
			this.loadingShowStatus = false
		},
		methods: {
			getDomainWithProtocol() {
			    const protocol = window.location.protocol; // 获取协议，例如 "http:" 或 "https:"
			    const hostname = window.location.hostname; // 获取主机名，例如 "www.example.com"
			    const port = window.location.port ? `:${window.location.port}` : ''; // 获取端口（如果有的话）
			
			    // 返回完整的域名加协议
			    return `${protocol}//${hostname}${port}`;
			},

			getDateInfo(date) {
			    // 确保输入是一个有效的日期对象
			    if (!(date instanceof Date)) {
			        throw new Error("Invalid date");
			    }
			    
			    // 获取年、月、日
			    const year = date.getFullYear();
			    const month = date.getMonth() + 1; // 月份从0开始，所以要加1
			    const day = date.getDate();
			    
			    // 获取周几（0-6，0是周日，1是周一，以此类推）
			    const week = date.getDay();
			    const weekDaysEnglish = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
			    const weekDaysChinese = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
			    
			    const weekDayEnglish = weekDaysEnglish[week];
			    const weekDayChinese = weekDaysChinese[week];
			    
			    // 获取英文几月
			    const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
			    const monthName = months[date.getMonth()];
			
			    return {
			        year: year,
			        month: month,
			        day: day,
			        week: weekDayChinese, // 改为中文星期
			        weekDay: weekDayEnglish, // 保持英文星期
			        monthName: monthName
			    };
			},

			handleSuccess(e) {
				this.img = e;
			}
		}
	}
</script>

<style lang="scss">

</style>